<!--
 * @Description:
 * @Version: 1.0
 * @Author: liguansheng
 * @Date: 2022-08-23 09:21:57
 * @LastEditors: liguansheng
 * @LastEditTime: 2022-08-23 17:24:04
-->
<template>
  <el-transfer
    class="claimTypesTransfer"
    :data="data"
    :titles="['拥有声明', '不拥有声明:']"
    v-model="claimTypeList"
    @change="handleChange"
  />
</template>

<script setup lang="ts">
import { onMounted, PropType, ref, watch } from 'vue'

import { getAllIdentityServerClaimTypes } from '@/http/identityServerClaimTypes'

const props = defineProps({
  activate: {
    type: Array as PropType<string[]>,
    required: true,
  },
})

interface EmitsType {
  (e: 'update:activate', value: string[]): void
}
const emit = defineEmits<EmitsType>()

interface IOption {
  key: string
  label: string
  disabled: boolean
}
const data = ref<IOption[]>([])
const claimTypeList = ref<string[]>([])

const init = async () => {
  const res = await getAllIdentityServerClaimTypes()
  data.value = res.map((item) => {
    return {
      key: item.id,
      label: item.name,
      disabled: false,
    }
  })
  claimTypeList.value = res
    .filter((item) => !props.activate.includes(item.name))
    .map((item) => item.id)
}
watch(
  () => props.activate,
  () => {
    const loseArr = props.activate.filter(
      (item) => !data.value.map((e) => e.label).includes(item),
    )
    data.value = data.value.concat(
      loseArr.map((item) => {
        return {
          key: item,
          label: item,
          disabled: false,
        }
      }),
    )
    claimTypeList.value = data.value
      .filter((item) => !props.activate.includes(item.label))
      .map((item) => item.key)
  },
)

const handleChange = () => {
  const activateValues = data.value
    .filter((item) => {
      return !claimTypeList.value.includes(item.key)
    })
    .map((item) => {
      return item.label
    })
  emit('update:activate', activateValues)
}
onMounted(() => {
  init()
})
</script>

<style scoped lang="scss">
.claimTypesTransfer {
  display: flex;
  justify-content: space-between;
}
</style>
